<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <van-nav-bar
      title="好客租房 - 登录"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-form @submit="onSubmit">
      <van-field
        v-model="fromMsg.username"
        name="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="fromMsg.password"
        type="password"
        name="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px;">
        <van-button
        round
        block
        square
        :disabled="isTrue"
        :loading="isTrue"
        loading-type="spinner"
        loading-text="登录中..."
        size="large"
        color="#56b97f"
        type="info"
        native-type="submit"
        >登录</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { mapActions } from 'vuex'

export default {
  data () {
    return {
      isTrue: false,
      fromMsg: {
        username: 'hzhmqd',
        password: '123456'
      }
    }
  },
  methods: {
    ...mapActions(['setToken']),
    async onClickLeft () {
      Toast('返回')
    },
    async onSubmit () {
      this.isTrue = true
      try {
        const res = await this.setToken(this.fromMsg)
        Toast.success('登录成功')
        console.log(res.data.status)
        this.$router.replace('/home')
        this.isTrue = false
      } catch (err) {
        console.log(err)
        Toast.fail('登陆失败')
        this.isTrue = false
      }
    }
  }
}

</script>

<style lang="less" scoped>
.van-nav-bar{
  background-color: #56b97f;
}
/deep/ .van-nav-bar__title {
  color: #fff;
}
/deep/ .van-icon-arrow-left:before{
  color: #fff;
}
/deep/ .van-cell {
  height: 70px;
  line-height: 70px;
}
/deep/ .van-cell::after {
  border-bottom: 1px solid #ccc;
}
</style>
